<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实体生成</title>

    <!-- head_element BEGIN -->
    <script src="https://img.wx.xiao-bo.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
    <link rel="stylesheet" href="https://img.wx.xiao-bo.com/ajax/libs/vant/2.12.44/index.min.css"/>
    <script src="https://s3.pstatp.com/cdn/expire-1-M/element-ui/2.8.2/index.js"></script>
    <!-- head_element END -->
    <script src="https://img.wx.xiao-bo.com/ajax/libs/axios/0.21.1/axios.min.js"></script>
</head>
<body>
<div id="app">
    <el-container>
        <!---->
        <!---->
        <!---->
        <el-main class='x-main'>
            <!---->
            <!---->
            <el-form @submit.native.prevent class="x_form" :inline="true" :model="form" size="mini" style="position: fixed;
        top: 0;
        width: 100%;
        z-index: 99;
        background: #fff;
        padding: 10px 0px 10px 0px;">
                <el-form-item label="表名">
                    <el-input v-model="form.compTable" placeholder="表名，回车解发搜索"></el-input>
                </el-form-item>
                <el-form-item>
                    <!--                    <el-button type="primary" @click="funcGetList">搜索</el-button>-->
                    <el-button type="primary" @click="funcGenToJob">生成到项目</el-button>
                    <el-button @click="funcGen">生成entity压缩包</el-button>
                </el-form-item>
            </el-form>
            <div style="margin-top: 30px;" class="table-wrap">
                <el-table stripe ref="multipleTable" tooltip-effect="dark"
                          @selection-change="funcTableSelectionChange"
                          :data="list_data">
                    <el-table-column type="selection" width="55"></el-table-column>
                    <el-table-column label="数据表">
                        <template slot-scope="data">
                            {{ data.row.db }}.
                            <span style="color:blue;">{{ data.row.tableName }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="类">
                        <template slot-scope="data">
                            {{ data.row.packageEntity }}.
                            <span style="color:blue;">{{ data.row.className }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="描述">
                        <template slot-scope="data">{{ data.row.tableComment }}</template>
                    </el-table-column>
                </el-table>
            </div>
        </el-main>
        <!---->
        <!---->
    </el-container>
    <!---->
    <!---->
    <!---->
</body>
</html>

<script>
    // 监听回车事件
    document.onkeydown = (e) => {
        let _key = window.event.keyCode
        if (_key === 13) {
            g_vue.funcGetList()
        }
    }

    let api_root = "{#api_root}";
    var g_vue = new Vue({
        el: '#app',
        data: {
            selected_data: [],
            form: {},
            list_data: [],
        },
        mounted() {
            console.log("mounted");
            this.funcGetList();
        },
        methods: {
            //生成
            funcGen() {
                console.log('funcGen', g_vue.selected_data);
                if (g_vue.selected_data.length <= 0) {
                    g_vue.$message.error("至少选择1项");
                    return;
                }
                let string1 = g_vue.selected_data.join(',')
                let url = `${api_root}sys/generator/gen?t=${string1}`;
                //
                location.href = url;
            },
            //表列表
            funcGenToJob() {
                console.log("funcGenToJob");
                console.log('funcGen', g_vue.selected_data);
                if (g_vue.selected_data.length <= 0) {
                    g_vue.$message.error("至少选择1项");
                    return;
                }
                let string1 = g_vue.selected_data.join(',')
                let f = new FormData()
                if (this.form.compTable) {
                    f.append('t', string1)
                }
                //
                axios({
                    method: `POST`,
                    url: `${api_root}sys/generator/genToJob`,
                    data: f,
                }).then((res) => {
                    console.log('success', res)
                    g_vue.$message.success("生成成功");
                }).catch((res) => {
                    console.log('error', res)
                    g_vue.$message.error(res);
                });
            },
            //表列表
            funcGetList() {
                console.log("funcGetList");
                let f = new FormData()
                f.append('page_size', 30)
                if (this.form.compTable) {
                    f.append('tableName', this.form.compTable)
                }
                //
                axios({
                    method: `POST`,
                    url: `${api_root}sys/generator/table_list`,
                    data: f,
                }).then((res) => {
                    console.log('success', res)
                    g_vue.list_data = res.data.list;
                }).catch((res) => {
                    console.log('error', res)
                    g_vue.$message.error(res);
                });
            },
            /**
             * 选择复选框事件
             * @param vals
             */
            funcTableSelectionChange(vals) {
                console.log('funcTableSelectionChange')
                //
                g_vue.selected_data = []
                for (var key in vals) {
                    let val = vals[key]
                    g_vue.selected_data.push(val.tableName)
                }

                console.log(g_vue.selected_data)
            },
            ////////////////////////
        }
    });
</script>

<style>
    .el-form .x_form {
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 99;
        background: #fff;
        border-top: 1px solid #d6d6d6;
        padding: 20px 0;
    }
</style>